<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="700px"
    @close="close"
  >
    <el-form ref="form" :model="form"  label-width="100px">
      <!--搜索-->
      <el-form-item label="联系电话：" prop="supplier_name">
        <el-autocomplete
          class="inline-input"
          v-model="form.mobile"
          :fetch-suggestions="querySearch"
          placeholder="请输入联系电话"
          :trigger-on-focus="false"
          @select="handleSelect"
        ></el-autocomplete>
        <el-button type="primary" @click="handleSelect">搜索</el-button>
      </el-form-item>

      <el-form-item label="组：" prop="staff">
        <el-select v-model="form.staff" placeholder="人员选择" clearable>
          <el-option label="公司成员" value="公司成员"/>
          <el-option label="供应商" value="供应商"/>
        </el-select>
      </el-form-item>
      <el-form-item label="用户姓名：" prop="name">
        <el-input class="row-input" v-model="form.name" />
      </el-form-item>
      <el-form-item label="部门：" prop="section">
        <el-input class="row-input" v-model="form.section" />
      </el-form-item>
      <el-form-item label="职务：" prop="post">
        <el-input class="row-input" v-model="form.duty" />
      </el-form-item>
      <el-form-item label="功能岗位：" prop="mobile">
        <el-select v-model="form.post" placeholder="请选择" clearable>
          <el-option label="经理" value="经理"/>
          <el-option label="副经理" value="副经理"/>
          <el-option label="财务" value="财务"/>
        </el-select>
      </el-form-item>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { getDetail, doAdd, doEdit } from '@/api/supplier'

  export default {
    name: 'companyEdit',
    props: {
      supplierCategories: {
        type: Array,
        required: true,
        default: () => [],
      },
    },

    data() {
      return {
        form: {
          id: '',
          mobile: '',
          staff:'',
          name:'',
          section:'',
          duty:'',
          post:'',
        },
        restaurants: [],
        rules: {
          supplier_name: [
            { required: true, trigger: 'blur', message: '请输入姓名' },
          ],
          mobile: [
            { required: true, trigger: 'blur', message: '请输入手机号' },
          ],
          supplier_alias: [
            { required: true, trigger: 'blur', message: '请输入供应商别名' },
          ],
          supplier_category_ids: [
            { required: true, trigger: 'change', message: '请选择供应商分类' },
          ],
          idcard: [
            { required: true, trigger: 'blur', message: '请输入身份证号' },
          ],
          bank_card: [
            { required: true, trigger: 'blur', message: '请输入银行卡号' },
          ],
          bank: [
            { required: true, trigger: 'blur', message: '请输入银行名称' },
          ],
        },
        title: '邀请加入',
        dialogFormVisible: false,
        type: '',
        is_disabled:false,
      }
    },

    watch: {
      // 修改分类时, 同步至 supplier_category_id
      'form.supplier_category_ids'(ids) {
        this.form.supplier_category_id = ids.join()
      },
    },
    created() {

    },
    methods: {
      handleSelect(item) {
        console.log(item);
      },
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      initDetail() {
        getDetail(this.form.id).then((res) => {
          this.form = {
            ...res,
            supplier_id: res.id,
            supplier_category_ids: res.supplier_category_id
              .split(',')
              .map((id) => +id),
          }
        })
      },
      showEdit(row) {
        if (!row) {
          this.title = '邀请加入'
          this.type = 'add'
          this.is_disabled = false
        } else {
          this.title = '编辑'
          this.type = 'edit'
          this.is_disabled = true
          this.form.id = row.id
          this.initDetail()
        }
        this.dialogFormVisible = true
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            let msg
            if (this.type === 'add') msg = await doAdd(this.form)
            else msg = await doEdit(this.form)
            this.$baseMessage(msg, 'success')
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
    },
  }
</script>
<style lang="scss">
.inline-input{
  width: 80%;
}
.row-input{
  width: 215px;
}
</style>
